<!--
 * @Date: 2023-03-20 16:15:45
 * @LastEditTime: 2023-03-20 17:00:39
 * @FilePath: /prepaid-refill/src/views/team/team.vue
 * 介绍:我的团队
-->
<script lang="ts" setup>
import useUserinfoStore from "@@/store/useUserinfoStore";
import { apiTeamLogs, TeamLogs } from "@@/api/page/team";
import { formatNumber } from "@@/utils/tools/tools";
import { omitText } from "@@/utils/tools/project";
import dayjs from "dayjs";
const teamLogs = ref<TeamLogs.Res>();
getTeamLogs();
/**获取团队记录 */
async function getTeamLogs() {
  const res = await apiTeamLogs();
  if (!res) return;
  teamLogs.value = res;
}

const currentMode = ref<"recommend" | "second">("recommend");
const currentList = computed<TeamLogs.Recommend[] | TeamLogs.Second[]>(() => {
  if (!teamLogs.value) return [];
  return teamLogs.value[currentMode.value];
});

const userinfoStore = useUserinfoStore();
const { userinfo } = storeToRefs(userinfoStore);
userinfoStore.getUserinfo();
</script>

<template>
  <div class="team auto-mt-lg">
    <Ccard>
      <template #header>
        <div class="flex-A-C">
          <h3>{{ $t("chuang-shi-deng-ji") }}</h3>
          <VanTag class="ml-xs" color="#91acd1">{{
            $t("v-userinfo-level", [userinfo?.level])
          }}</VanTag>
        </div>
        <div class="info-layout mt-md">
          <div>V0-V3</div>
          <div>{{ $t("zong-ye-ji") }}</div>
        </div>
        <div
          @click="currentMode = 'recommend'"
          class="info-layout mt-md team_count active"
        >
          <div>{{ $t("zhi-tui") }}</div>
          <div>{{ formatNumber(teamLogs?.recommend_count, 0) }}</div>
          <div>{{ formatNumber(teamLogs?.recommend_price, 0) }}</div>
        </div>
        <div
          @click="currentMode = 'second'"
          class="info-layout mt-md team_count active"
        >
          <div>{{ $t("er-dai") }}</div>
          <div>{{ formatNumber(teamLogs?.second_count, 0) }}</div>
          <div>{{ formatNumber(teamLogs?.second_price, 0) }}</div>
        </div>
      </template>
      <div class="gridVar--col" style="--col: 3">
        <div>{{ $t("ri-qi") }}</div>
        <div>{{ $t("di-zhi") }}</div>
        <div>{{ $t("deng-ji") }}</div>
      </div>
      <div
        v-for="item in currentList"
        :key="item.address"
        class="list_item gridVar--col"
        style="--col: 3"
      >
        <div>
          {{ dayjs(item.created_at).format("YYYY-MM-DD HH:mm:ss") }}
        </div>
        <CcopyText :copy-text="item.address">
          {{ omitText(item.address) }}
        </CcopyText>
        <div>{{ formatNumber(item.level, 0) }}</div>
      </div>
    </Ccard>
    <Ccard class="cool-border">
      <div class="content">
        <h3>
          {{ $t("san-xia-zong-ren-shu") }}:
          {{ formatNumber(teamLogs?.total, 0) }}/500
        </h3>
      </div>
    </Ccard>
  </div>
</template>

<style lang="less" scoped>
.cool-border {
  background-image: var(--C-LG1);
  padding: 6rem;
  .content {
    text-align: center;
    border-radius: var(--R-sm);
    padding: var(--gap-xxl);
    background-color: var(--C-B1);
  }
}
.team_count {
  padding: 0 var(--gap-xs);
  background-color: var(--C-B1);
  border-radius: var(--R-sm);
}
.list_item {
}
</style>
